<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from "vue";
import { Detection } from '../../api/Operation/index'

var colorArray = [
    {
        top: '#1ace4a', //绿
        bottom: 'rgba(11,42,84, 0.3)'
    }, {
        top: 'rgb(11,42,84)', //绿
        bottom: 'red'
    }
];

const tableData = ref([])

const getData = async () => {
    let res = await Detection()
    console.log(res);
    tableData.value = res.data.data

}
onMounted(() => {

    getData()

    var myChart = echarts.init(document.getElementById('OperationBT'));

    var option = {
        tooltip: {
            show: true,
            formatter: "{b}:{c}"
        },
        grid: {
            left: '5%',
            top: '12%',
            right: '1%',
            bottom: '8%',
            containLabel: true
        },

        xAxis: {
            type: 'value',
            show: false,
            position: 'top',
            max: '300',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#fff',
                }
            },
            splitLine: {
                show: false
            },
        },
        yAxis: [{
            type: 'category',
            axisTick: {
                show: false,
            },
            inverse: 'true', //排序
            axisLine: {
                show: false,
            }
        }

        ],
        series: [{
            name: '能耗值',
            type: 'bar',
            label: {
                // normal: {
                //     show: true,
                //     position: 'right',
                //     formatter: '{c}',
                //     textStyle: {
                //         color: 'white' //color of value
                //     }
                // }
            },
            itemStyle: {
                normal: {
                    show: true,
                    color: function (params: any) {
                        let num = colorArray.length;
                        return {
                            type: 'linear',
                            colorStops: [{
                                offset: 0,
                                color: colorArray[params.dataIndex % num].bottom
                            }, {
                                offset: 1,
                                color: colorArray[params.dataIndex % num].top
                            }],
                            //globalCoord: false
                        }
                    },
                    barBorderRadius: 70,
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            barGap: '0%',
            barCategoryGap: '50%',
            data: [240, 140]
        }

        ]
    };

    myChart.setOption(option);
})
</script>

<template>
    <div class="right-Top">
        <div class="right-Top-img">
            <span style="padding-left: 20px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">设备监测</span>
        </div>
        <div class="right-Top-bottom">
            <div class="right-Top-bottom-l"></div>
            <div class="right-Top-bottom-r">
                <div id="OperationBT" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
        <div class="right-Top-foot">
            <el-table :data="tableData"
                style="width: 99.97%;--el-table-border-color: none;border-right: 1px #143275 solid;border-left: 1px #143275 solid;border-bottom: 1px #143275 solid;"
                :highlight-current-row="false"
                :header-cell-style="{ backgroundColor: '#143275', color: '#ffffff', fontSize: '14px', textAlign: 'center', borderLeft: '0.5px #154480 solid', borderBottom: '1px #154480 solid' }"
                :cell-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', borderBottom: '0.5px #143275 solid', borderLeft: '0.5px #143275 solid' }"
                :row-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', }" empty-text="暂无数据"
                max-height="818">
                <el-table-column prop="ettg_serial" label="序号" />
                <el-table-column prop="ettg_type" label="设备名称" />
                <el-table-column prop="ettg_status" label="设备状态">
                    <template #default="scope">
                        <el-switch :v-model="scope.row.ettg_status === '开启' ? true : false" class="ml-2"
                            style="--el-switch-on-color: #13ce66" />
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<style scoped lang="scss">
.right-Top {
    width: 28rem;
    height: 33rem;
    margin: 6rem 2rem 4rem 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/RightRight.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 7rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);
        display: flex;

        &-l {
            width: 40%;
            height: 100%;
            background: url('../../assets/images/right-top.png') no-repeat center center;
            background-size: 70% 70%;
        }

        &-r {
            width: 60%;
            height: 100%;
        }

    }

    &-foot {
        width: 100%;
        height: 20rem;
        margin-top: 1rem;
        overflow: hidden;

        &-bottom {
            width: 100%;
            height: 18rem;
        }
    }
}

/*  
// 表格部分样式
 // 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #93dcfe;
    font-size: 24px;
}

/* 表格内背景颜色  */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
    border: 0px;
    color: #93dcfe;
    font-size: 24px;
    height: 5px;
    font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
    font-weight: Normal;
}

/* // 去掉最下面的那一条线  */
.el-table::before {
    height: 0px;
}

/* // 设置表格行高度 */
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
    padding: 0;
    height: 54px;
}

/* // 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover>td {
    background: #063570 !important;
}

/* // 取消当前行高亮 */
::v-deep .el-table tbody tr {
    pointer-events: none;
}

/* 修改表头样式-加边框 */
/* ::v-deep .el-table__header-wrapper {
  border: solid 1px #04c2ed;
} */

/* // 表格斑马自定义颜色 */
::v-deep .el-table__row.warning-row {
    background: #01205A;
}


/* 去掉表格里的padding */
::v-deep .el-table .cell,
.el-table th div {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>